<template>
  <div class="boxaa">
    <audio
      :src="curmusurl"
      class="audio"
      ref="myVideo"
      @timeupdate="handleTimeUpdate"
      @ended="pauseMusic"
    ></audio>
    <div class="g-btmbar">
      <div class="m-playbar">
        <div class="bg"></div>
        <div
          class="hand"
          title="展开播放条"
        > </div>
        <!-- 播放条 -->
        <div class="g_player">
          <!-- 上一首、下一首、播放按钮 -->
          <div class="btns">
            <a
              href="#"
              title="上一首(ctrl+←)"
              class="iconfont icon-shangyishou"
            ></a>
            <a
              href="#"
              title="播放/暂停(p)"
              class="iconfont icon-bofang"
              @click.prevent="playORpause"
              v-if="isPaused"
            ></a>
            <a
              href="#"
              title="播放/暂停(p)"
              class="iconfont icon-zantingtingzhi"
              @click.prevent="playORpause"
              v-else-if="!isPaused"
            ></a>
            <a
              href="#"
              title="下一首(ctrl+→)"
              class="iconfont icon-xiayishou"
            ></a>
          </div>
          <!-- 头像 -->
          <div class="head">
            <a href="#">
              <img v-lazy="curmusinfo.al.picUrl">
            </a>
          </div>
          <!----------------------------- 进度条 -->
          <div class="play">
            <div class="words">
              <a
                href="#"
                class="f-thide name"
                :title="curmusinfo.name"
              >{{curmusinfo.name}}</a>
              <span class="by f-thide">{{curmusinfo.ar[0].name}}</span>
            </div>
            <div class="m-pbar">
              <div
                class="barbg"
                @click="handleProgressClick($event)"
                @pointermove.prevent="moveDragging($event)"
                @pointerup.prevent="stopDragging"
              >
                <!-- 进度条 -->
                <!-- 长条 -->
                <div class="rdy"></div>
                <!-- 当前位置 -->
                <div class="cur curplaypos">
                  <!-- 小圆点 -->
                  <span
                    class="fangd"
                    @pointerdown="startDragging($event)"
                  ></span>
                </div>
              </div>
              <div class="toltim"> <em>{{videoProgress | dateFormat2}}</em> /{{crupt| dateFormat2}}</div>
            </div>
          </div>
          <!----------画中画、收藏、分享------------------------------------ -->
          <div class="oper">
            <a
              href="#"
              title="画中画歌词"
              class="iconfont icon-huazhonghua"
            ></a>
            <a
              href="#"
              title="收藏"
              class="iconfont icon-tianjiawenjianjia"
            ></a>
            <a
              href="#"
              title="分享"
              class="iconfont icon-fenxiang"
            ></a>
          </div>
          <!-----------------------------------------------  -->
          <div class="ctrl">
            <!-- 音量条 -->
            <div class="m-vol">
              <div class="barbg"></div>
              <div class="vbg">
                <div class="curr"></div>
                <span class="btnyu"></span>
              </div>
            </div>
            <!-- 音量按钮 -->
            <a
              href="#"
              class="iconfont icon-yinliang"
            ></a>
            <!-- 切换播放顺序按钮 -->
            <a
              href="#"
              class="iconfont icon-suiji"
            ></a>
            <!-- 播放顺序文字 -->
            <div class="tip">随机</div>
            <!-- 播放列表 -->
            <span class="add">
              <span class="tipli">已添加到播放列表</span>
              <a
                href="#"
                title="播放列表"
                class="iconfont"
                @click="changeShow"
              >18</a>
            </span>
          </div>
        </div>
        <!-- 播放列表 -->
        <div
          class="list"
          v-show="plIsShow"
        >
          <!-- 播放列表头部 -->
          <div class="listhd">
            <h4>播放列表(<span>104</span>)</h4>
            <a
              href="#"
              class="addall"
            >
              <span class="icn"></span>
              收藏全部
            </a>
            <span class="jie12"></span>
            <a
              href="#"
              class="clear"
            >
              <span class="icn"></span>
              清除
            </a>
            <p class="lytit f-thide">{{curmusinfo.name}}</p>
            <span
              class="close"
              @click="plIsShow = false"
            >关闭</span>
          </div>
          <!-- 播放列表body -->
          <div class="listbd">
            <!-- 背景 -->
            <img
              src="//music.163.com/api/img/blur/109951166353671371"
              class="imgbg"
            >
            <!-- 播放列表——歌曲 -->
            <div class="msk"></div>
            <div class="listbdc">
              <ul class="f-cb">
                <li>
                  <div class="col col-1"></div>
                  <div class="col col-2">染色体</div>
                  <div class="col col-3"></div>
                  <div class="col col-4">
                    <span title="张杰">
                      <a href="#">张杰</a>
                    </span>
                  </div>
                  <div class="col col-5">03:58</div>
                  <div class="col col-6">
                    <a href="#">来自榜单</a>
                  </div>
                </li>
              </ul>
            </div>
            <!-- 播放列表滚动条 -->
            <div class="bline">
              <span class="scrol">

              </span>
            </div>
            <div class="ask">
              <a
                href="#"
                class="icn"
                @click.prevent="sayError"
              ></a>
            </div>
            <div
              class="upload"
              v-show="errorShow"
            >
              <a href="#">报错</a>
            </div>
            <!-- 当前播放歌词 -->
            <div class="msk2"></div>
            <div class="listlyric">
              <p
                :data-time="item.time[0]"
                v-for="(item,index) in lyricsObjArr2"
                :key="index"
              >{{item.lyric}}</p>
              <!-- <p
                data-time="1"
                class="z-sel"
              >作曲 : 黄韵仁/李俊纬</p> -->

            </div>
            <!-- 播放列表滚动条 -->
            <div class="bline blineci">
              <span class="scrol">

              </span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios'
import bus from '../../eventbus'
export default {
  props: {
    musida: {
      default: 1293886117
    }
  },
  watch: {
    musida (newVal, oldVal) {
      console.log('-------playcontrol中监听的id--------------')
      console.log(newVal, oldVal)
      this.musid = newVal
      document.getElementsByClassName('curplaypos')[0].style.width = 0 + 'px';
      this.isPaused = true;
      this.getInfo()
    }
  },
  data () {
    return {
      // 当前播放音乐id
      musid: 1293886117,
      // 当前播放音乐信息
      curmusinfo: {
        al: {
          picUrl: ''
        },
        ar: [
          { name: '' }
        ]
      },
      // 当前播放音乐路径
      curmusurl: '',
      // 音乐总时长（毫秒）
      crupt: 0,
      // 音乐当前时间
      videoProgress: 0,
      // 是否暂停
      isPaused: true,
      video: null,
      curWid: 0,
      isDragging: false,
      draggingStartX: 0,
      errorShow: false,
      // 播放列表的显示与隐藏
      plIsShow: false,
      // geci: []
      lyricsObjArr2: []
    }
  },
  created () {
    this.getInfo()
    bus.$on('musicid', val => {
      this.musid = val
      this.getInfo()
    })
  },
  mounted () {
    this.video = this.$refs.myVideo;
  },
  methods: {
    async getInfo () {
      // console.log('播放控件id:', this.musid)
      // 1、获取音乐信息动态渲染到固定播放列表中
      let res = await axios.get('https://autumnfish.cn//song/detail?ids=' + this.musid)
      this.curmusinfo = res.data.songs[0]
      this.crupt = this.curmusinfo.dt
      // 2、获取音乐播放url
      let res2 = await axios.get('https://autumnfish.cn//song/url?id=' + this.musid)
      this.curmusurl = res2.data.data[0].url
      // console.log('播放控件音乐地址', this.curmusurl)
    },
    // 获取歌词
    async getci () {
      let res = await axios.get('https://autumnfish.cn//lyric?id=' + this.musid)
      console.log(res)
    },
    async geci () {
      let res = await axios.get('https://autumnfish.cn//lyric?id=' + this.musid)
      const lineArr = res.data.lrc.lyric.split(/\n/)
      const regTime = /\[\d{2}:\d{2}.\d{2,3}\]/
      const lyricsObjArr = [];
      lineArr.forEach(item => {
        if (item === '') return
        const obj = {}
        const time = item.match(regTime)
        obj.lyric = item.split(']')[1].trim() === '' ? '' : item.split(']')[1].trim()
        obj.time = time ? time : 0
        if (obj.lyric === '') {
          // console.log('这一行没有歌词')
        } else {
          lyricsObjArr.push(obj)
        }
      })
      console.log('----------------------')
      // console.log(lyricsObjArr)
      this.lyricsObjArr2 = lyricsObjArr;

      console.log(this.lyricsObjArr2)
    },
    // 播放音乐
    playORpause () {
      if (this.isPaused) {
        this.playMusic()
      }
      else {
        this.pauseMusic()
      }
    },
    playMusic () {
      // console.log('播放')
      this.isPaused = false;
      this.video.play();
    },
    pauseMusic () {
      // console.log('暂停')
      this.isPaused = true;
      // 暂停
      this.video.pause();
    },
    //播放时间点更新时同步更新宽度
    handleTimeUpdate () {
      // '当前时间：(秒)', this.videoProgress
      // '总时长：(秒)', this.video.duration
      this.videoProgress = Math.round(this.video.currentTime);   //当前时间
      this.curWid = ((this.videoProgress / this.video.duration)) * 465;   //当前宽度
      document.getElementsByClassName('curplaypos')[0].style.width = this.curWid + 'px';
    },
    handleProgressClick (event) {
      const clickX = event.clientX;
      this.setProgress(clickX)
    },
    setProgress (x) {
      let progressPercent = (x - 325) / 465;
      if (progressPercent < 0) {
        progressPercent = 0;
      } else if (progressPercent > 1) {
        progressPercent = 1;
      }
      //设置播放点--->修改时间点 = 总时长 * 当前宽度比
      this.video.currentTime = this.video.duration * progressPercent;
      // console.log('宽度比', progressPercent)
      // console.log('播放时间：', this.video.currentTime)
    },
    // 按住进度条小圆点触发
    startDragging (event) {
      this.pauseMusic();
      this.isDragging = true;
      this.draggingStartX = event.clientX;
    },
    // 开始拖动小圆点
    moveDragging (event) {
      if (this.isDragging) {
        // 进度条当前实际的width
        const offsetX = event.clientX - this.draggingStartX;
        this.dotOffsetX = offsetX < 0 ? 0 : offsetX;
        // 根据最后的点设置播放点。
        this.setProgress(event.clientX);
      }
    },
    // 停止拖动小圆点
    stopDragging () {
      this.isDragging = false;
      this.dotOffsetX = 0;
      this.playMusic()
    },
    sayError () {
      // console.log('点击了')
      if (this.errorShow) { this.errorShow = false }
      else { this.errorShow = true }
    },
    // 播放列表的显示与隐藏
    changeShow () {
      if (this.plIsShow) { this.plIsShow = false }
      else { this.plIsShow = true; this.getci(); this.geci() }
    },
  }
}
</script>

<style lang="less" scoped>
.g-btmbar {
  position: fixed;
  bottom: 0px;
  left: 0;
  right: 0;
  width: 100%;
  z-index: 199999;
  .m-playbar {
    width: 100%;
    height: 53px;
    background-color: #302f2f;
    position: relative;
    .bg {
      margin-right: 67px;
      height: 53px;
    }
    .hand {
      position: absolute;
      top: -10px;
      width: 100%;
      height: 20px;
      cursor: pointer;
      background-color: rgba(75, 158, 236, 0.5);
    }
    // 播放条
    .g_player {
      position: absolute;
      left: 11%;
      top: 6px;
      z-index: 15;
      width: 980px;
      height: 47px;
      margin: 0 auto;
      display: flex;
      justify-content: left;
      align-items: center;
      .btns {
        width: 137px;
        padding: 6px 0 0 0;
        display: flex;
        justify-content: left;
        align-items: center;
        .iconfont {
          text-decoration: none;
          display: block;
          width: 28px;
          height: 28px;
          line-height: 28px;
          margin-right: 8px;
          margin-top: 5px;
          color: #c1c1c1;
          font-size: 20px;
          text-align: center;
        }
        .icon-bofang {
          color: #fff;
          font-size: 25px;
        }
        .icon-zantingtingzhi {
          color: #fff;
          font-size: 25px;
        }
      }
      .head {
        margin: 6px 13px 0 0;
        a {
          text-decoration: none;
          display: block;
          width: 34px;
          height: 35px;
          border: 1px solid #e7e7e7;
          img {
            width: 34px;
            height: 34px;
          }
        }
      }
      .play {
        width: 581px;
        .words {
          height: 28px;
          overflow: hidden;
          color: #e8e8e8;
          text-shadow: 0 1px 0 #171717;
          line-height: 28px;
          font-size: 12px;
          .name {
            max-width: 300px;
            color: #e8e8e8;
            text-decoration: none;
            font-size: 12px;
          }
          .f-thide {
            overflow: hidden;
            text-overflow: ellipsis;
            white-space: nowrap;
            word-wrap: normal;
          }
          .by {
            max-width: 220px;
            margin-left: 15px;
            color: #9b9b9b;
          }
        }
        .m-pbar {
          width: 466px;
          position: relative;
          .barbg {
            position: relative;
            .rdy {
              width: 100%;
              height: 9px;
              background-image: url(../../assets/image/statbar.png);
              background-position: right -30px;
            }
            .cur {
              width: 0%;
              height: 9px;
              position: absolute;
              top: 0;
              left: 0;
              background-image: url(../../assets/image/statbar.png);
              background-position: left -66px;
              .fangd {
                position: absolute;
                display: block;
                background-image: url(../../assets/image/iconall.png);
                cursor: pointer;
                top: -7px;
                right: -13px;
                width: 22px;
                height: 24px;
                margin-left: -11px;
                background-position: 0 -250px;
              }
            }
          }
          .toltim {
            font-size: 12px;
            position: absolute;
            top: -3px;
            right: -84px;
            color: #797979;
            text-shadow: 0 1px 0 #121212;
            em {
              font-style: normal;
              color: #e8e8e8;
            }
          }
        }
      }
      .oper {
        width: 87px;
        height: 36px;
        display: flex;
        justify-content: left;
        align-items: center;
        margin-top: 12px;
        .iconfont {
          text-align: center;
          text-decoration: none;
          font-size: 15px;
          color: #848484;
          margin: 0 5px;
        }
      }
      .ctrl {
        position: relative;
        width: 133px;
        padding-left: 13px;
        // 音量条
        .m-vol {
          position: absolute;
          top: -113px;
          left: 9px;
          clear: both;
          width: 32px;
          height: 113px;
          // visibility: visible;
          display: none;
          .barbg {
            position: absolute;
            top: 0;
            left: 0;
            width: 32px;
            height: 113px;
            background-image: url(../../assets/image/playbar.png);
            background-position: 0 -503px;
          }
          .vbg {
            padding: 4px 0;
            position: absolute;
            top: 7px;
            left: 14px;
            width: 4px;
            height: 93px;
            .curr {
              width: 4px;
              height: 46.5px;
              position: absolute;
              top: auto;
              bottom: 4px;
              left: 0;
              background-image: url(../../assets/image/playbar.png);
              background-position: -40px bottom;
              overflow: hidden;
            }
            .btnyu {
              position: absolute;
              top: 40.5px;
              left: -7px;
              display: block;
              width: 18px;
              height: 20px;
              background-image: url(../../assets/image/iconall.png);
              background-position: -40px -250px;
              cursor: pointer;
            }
          }
        }
        .iconfont {
          text-decoration: none;
          display: inline-block;
          width: 25px;
          height: 25px;
          line-height: 25px;
          text-align: center;
          margin: 11px 2px 0 0;
          font-size: 15px;
          color: #848484;
        }

        // 播放列表
        .add {
          display: inline-block;
          width: 59px;
          height: 36px;
          position: relative;
          .tipli {
            position: absolute;
            top: -51px;
            left: -65px;
            clear: both;
            width: 152px;
            height: 49px;
            background-image: url(../../assets/image/playbar.png);
            background-position: 0 -287px;
            text-align: center;
            color: #fff;
            line-height: 37px;
            font-size: 12px;
            display: none;
          }
          .iconfont {
            display: block;
            float: none;
            width: 38px;
            padding-left: 21px;
            line-height: 27px;
            text-align: center;
            color: #848484;
            text-shadow: 0 1px 0 #080707;
            text-indent: 0;
            text-decoration: none;
            background-image: url(../../assets/image/playbar.png);
            background-position: -42px -68px;
          }
        }
        // 播放顺序字样
        .tip {
          position: absolute;
          top: -35px;
          left: 12px;
          width: 81px;
          height: 39px;
          line-height: 34px;
          background-image: url(../../assets/image/playbar.png);
          background-position: 0 -457px;
          color: #fff;
          font-size: 12px;
          text-align: center;
          display: none;
        }
      }
    }
    // 播放列表
    .list {
      position: absolute;
      left: 50%;
      bottom: 47px;
      width: 986px;
      height: 301px;
      margin-left: -493px;
      .listhd {
        background-image: url(../../assets/image/playlist_bg.png);
        background-position: 0 0;
        height: 41px;
        padding: 0 5px;
        font-size: 12px;
        color: #333;
        position: relative;
        height: 40px;
        h4 {
          position: absolute;
          left: 25px;
          top: 0;
          height: 39px;
          line-height: 39px;
          font-size: 14px;
          color: #e2e2e2;
        }
        .addall {
          position: absolute;
          left: 398px;
          top: 12px;
          height: 16px;
          line-height: 16px;
          cursor: pointer;
          color: #ccc;
          display: flex;
          justify-content: left;
          align-items: center;
          .icn {
            display: inline-block;
            height: 16px;
            width: 16px;
            margin: 1px 6px 0 0;
            background-position: -24px 0;
            background-image: url(../../assets/image/playlist.png);
          }
        }
        .jie12 {
          position: absolute;
          top: 13px;
          left: 477px;
          height: 15px;
          border-left: 1px solid #000;
          border-right: 1px solid #2c2c2c;
        }
        .clear {
          position: absolute;
          left: 490px;
          top: 12px;
          height: 17px;
          line-height: 17px;
          cursor: pointer;
          color: #ccc;
          display: flex;
          justify-content: left;
          align-items: center;
          .icn {
            display: inline-block;
            height: 16px;
            width: 13px;
            margin: 1px 6px 0 0;
            background-position: -51px 0;
            background-image: url(../../assets/image/playlist.png);
          }
        }
        .addall:hover {
          text-decoration: underline;
          color: #fff;
          .icn {
            background-position: -24px -20px;
          }
        }
        .clear:hover {
          text-decoration: underline;
          color: #fff;
          .icn {
            background-position: -51px -20px;
          }
        }
        .lytit {
          position: absolute;
          left: 595px;
          top: 0;
          width: 346px;
          text-align: center;
          height: 39px;
          line-height: 39px;
          color: #fff;
          font-size: 14px;
        }
        .close {
          position: absolute;
          top: 6px;
          right: 8px;
          width: 30px;
          height: 30px;
          overflow: hidden;
          text-indent: -999px;
          cursor: pointer;
          background-image: url(../../assets/image/playlist.png);
          background-position: -195px 9px;
        }
      }
      .listbd {
        position: absolute;
        left: 0;
        top: 40px;
        width: 976px;
        height: 260px;
        overflow: hidden;
        background-image: url(../../assets/image/playlist_bg.png);
        background-position: -1014px 0;
        background-repeat: repeat-y;
        padding: 0 5px;
        .imgbg {
          position: absolute;
          left: 2px;
          top: -360px;
          z-index: 1;
          width: 980px;
          height: auto;
          opacity: 0.2;
        }
        // 播放列表——歌曲
        .msk {
          position: absolute;
          left: 2px;
          top: 0;
          z-index: 2;
          width: 558px;
          height: 260px;
          background: #121212;
          opacity: 0.5;
        }
        .listbdc {
          position: absolute;
          left: 2px;
          top: 0;
          z-index: 4;
          height: 260px;
          width: 553px;
          overflow: hidden;
          .f-cb {
            color: #ccc;
            overflow: hidden;
            li {
              .col {
                float: left;
                padding-left: 10px;
                height: 28px;
                line-height: 28px;
                overflow: hidden;
                cursor: pointer;
              }
              .col-1 {
                width: 10px;
              }
              .col-2 {
                width: 256px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                font-size: 12px;
              }
              .col-3 {
                width: 78px;
                position: relative;
              }
              .col-4 {
                width: 70px;
                overflow: hidden;
                white-space: nowrap;
                text-overflow: ellipsis;
                a {
                  color: #9b9b9b;
                  font-size: 12px;
                }
              }
              .col-5 {
                width: 35px;
                color: #666;
                font-size: 12px;
              }
              .col-6 {
                width: 37px;
                padding-left: 6px;
                a {
                  display: inline-block;
                  width: 14px;
                  height: 16px;
                  margin-left: 0;
                  background-image: url(../../assets/image/playlist.png);
                  background-position: -80px 0px;
                  float: right;
                  overflow: hidden;
                  margin: 7px 0 0 10px;
                  text-indent: -9999px;
                }
              }
            }
          }
        }
        .bline {
          position: absolute;
          left: 555px;
          top: -1px;
          z-index: 2;
          width: 6px;
          height: 260px;
          background: #000;
          opacity: 0.5;
          .scrol {
            height: 22.5634px;
            display: block;
            position: absolute;
            left: 0;
            top: 0px;
            width: 4px;
            border-radius: 5px;
            cursor: pointer;
            background: #868686;
            border: 1px solid #a6a6a6;
            opacity: 0.8;
          }
        }
        .blineci {
          left: auto;
          right: 2px;
        }
        .ask {
          position: absolute;
          right: 25px;
          top: 12px;
          cursor: pointer;
          z-index: 999;
          .icn {
            display: inline-block;
            width: 21px;
            height: 21px;
            background-image: url(../../assets/image/playlist.png);
            background-position: 0 -50px;
            text-indent: 0;
          }
        }
        .ask:hover {
          .icn {
            background-position: -23px -50px;
          }
        }
        .upload {
          position: absolute;
          right: 12px;
          top: 40px;
          box-shadow: 0 2px 3px rgb(0 0 0 / 75%);
          width: 81px;
          z-index: 5;
          // display: none;
          a {
            font-size: 12px;
            display: block;
            text-align: center;
            padding: 8px 0;
            color: #666;
            background: #ebebeb;
            text-shadow: 0 1px 0 #fff;
          }
        }
        .msk2 {
          position: absolute;
          left: 560px;
          top: 0;
          z-index: 3;
          width: 420px;
          height: 250px;
          background: #121212;
          opacity: 0.01;
        }
        .listlyric {
          position: absolute;
          right: 40px;
          top: 0;
          z-index: 4;
          margin: 21px 0 20px 0;
          height: 219px;
          width: 354px;
          overflow: hidden;
          p {
            color: #989898;
            word-wrap: break-word;
            text-align: center;
            line-height: 32px;
            height: auto !important;
            min-height: 32px;
            transition: color 0.7s linear;
            font-size: 12px;
          }
          .z-sel {
            color: #fff;
            font-size: 14px;
          }
        }
      }
    }
  }
}
</style>
